<template>
  <!-- 加载动画 -->
  <view class="loading-container" v-if="!refund">
    <view class="loading-spinner">
      <view class="loading-bounce"></view>
    </view>
    <text class="loading-text">加载中...</text>
  </view>

  <scroll-view class="page-scroll" scroll-y v-else>
    <view class="content">
      <!-- 售后状态卡片 -->
      <view class="status-card">
        <view class="status-icon" :class="getStatusClass()">
          <up-icon :name="getStatusIcon()" size="48rpx" color="#fff"></up-icon>
        </view>
        <view class="status-info">
          <text class="status-title">{{ getStatusText() }}</text>
          <text class="status-desc">{{ getStatusDesc() }}</text>
        </view>
      </view>

      <!-- 商品信息 -->
      <view class="card goods-card">
        <view class="goods-image">
          <album width="150rpx" ref="albumRef" height="150rpx"
                 :showExtraImages="false"
                 :images="refund.sellOrderDetailVo.images"
                 :maxCount="1" :previewEnabled="false"></album>
        </view>
        <view class="goods-info">
          <view class="title-wrapper">
            <text class="title clamp">{{ refund.sellOrderDetailVo.productVo.productName }}</text>
            <text class="price">
              <text class="symbol">￥</text>{{ refund.sellOrderDetailVo.amount }}
            </text>
          </view>
          <view class="specs-wrapper">
            <text class="attr-box">{{ refund.sellOrderDetailVo.specificationVo.specName }}</text>
            <text class="quantity">x{{ Number(refund.sellOrderDetailVo.quantity).toFixed(0) }}</text>
          </view>
        </view>
      </view>
      
      <!-- 联系客服按钮 -->
      <view class="service-button-wrapper">
        <button class="service-button" @click="showService = true">
          <text>联系客服</text>
        </button>
      </view>

      <!-- 售后信息 -->
      <view class="card info-card">
        <view class="info-title">
          <view class="title-bar"></view>
          <text>售后信息</text>
        </view>
        <view class="info-item">
          <text class="item-label">售后类型</text>
          <text class="item-value">
            <text class="tag" :class="getRefundTypeClass()">{{ getRefundTypeText() }}</text>
          </text>
        </view>
        <view class="info-item">
          <text class="item-label">申请时间</text>
          <text class="item-value">{{ refund.createTime }}</text>
        </view>
        <view class="info-item reason-item">
          <text class="item-label">申请原因</text>
          <text class="item-value reason-text">{{ refund.reason }}</text>
        </view>
        <view class="info-item images-item">
          <text class="item-label">凭证图片</text>
          <view class="item-value" v-if="refund.images">
            <album width="150rpx"
                   height="150rpx"
                   :showExtraImages="true"
                   :previewEnabled="true"
                   :images="refund.images"
                   :maxCount="2"
                   class="evidence-images"></album>
          </view>
          <text class="item-value no-image" v-else>未上传</text>
        </view>
      </view>

      <!-- 收货信息 -->
      <view class="card info-card" v-if="refund.type === 0">
        <view class="info-title">
          <view class="title-bar"></view>
          <text>换货信息</text>
        </view>
        <view class="info-item">
          <text class="item-label">收货人</text>
          <text class="item-value">{{ refund.consignee }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">手机号</text>
          <text class="item-value">{{ refund.mobile }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">换货地址</text>
          <view class="item-value address-value">
            <text>{{ refund.deliveryRegion.replace(/,/g, '') }}</text>
            <text>{{ refund.deliveryAddress }}</text>
          </view>
        </view>
      </view>

      <!-- 售后进度 -->
      <view class="card info-card">
        <view class="info-title">
          <view class="title-bar"></view>
          <text>售后进度</text>
        </view>
        
        <!-- 售后进度步骤条 -->
        <view class="progress-steps">
          <view class="step-line-container">
            <view class="step-line-bg"></view>
            <view class="step-line-active" :style="{width: getProgressWidth()}"></view>
          </view>
          
          <view class="step-items">
            <view class="step-item" :class="{'active': true, 'current': refund.status === 0 && refund.complete === 0}">
              <view class="step-dot"></view>
              <text class="step-text">申请提交</text>
            </view>
            
            <view class="step-item" :class="{'active': refund.status >= 0 || refund.complete === 1, 'current': refund.status === 1 && refund.complete === 0}">
              <view class="step-dot"></view>
              <text class="step-text">商家审核</text>
            </view>
            
            <view v-if="[0, 1].includes(refund.type) && refund.status !== 2" class="step-item" :class="{'active': refund.status >= 1 && refund.needShipBack === 1, 'current': refund.status === 1 && refund.needShipBack === 1 && !refund.logisticsOrderNo}">
              <view class="step-dot"></view>
              <text class="step-text">退回商品</text>
            </view>
            
            <view v-if="refund.status !== 2" class="step-item" :class="{'active': refund.complete === 1, 'current': refund.complete === 1}">
              <view class="step-dot"></view>
              <text class="step-text">{{refund.type === 0 ? '换货完成' : '退款完成'}}</text>
            </view>
          </view>
        </view>
        
        <view class="info-item">
          <text class="item-label">售后状态</text>
          <text class="item-value status-value" :class="getStatusValueClass()">{{ getStatusValueText() }}</text>
        </view>
      </view>

      <!-- 退货信息 -->
      <view class="card info-card" v-if="[0,1].includes(refund.type) && refund.needShipBack !== null && refund.status === 1">
        <view class="info-title">
          <view class="title-bar"></view>
          <text>退货信息</text>
        </view>
        <view class="info-item">
          <text class="item-label">是否需要寄回商家</text>
          <text class="item-value ship-back-value" :class="{'ship-back-yes': refund.needShipBack === 1, 'ship-back-no': refund.needShipBack === 0}">
            {{ refund.needShipBack === 1 ? '是' : '否' }}
          </text>
        </view>
        
        <template v-if="refund.needShipBack === 1">
          <view class="info-item">
            <text class="item-label">商家收货人</text>
            <text class="item-value">{{ refund.shipper }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">商家联系方式</text>
            <text class="item-value">{{ refund.shipperPhone }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">商家收货区域</text>
            <text class="item-value">{{ refund.shipperRegion.replace(/,/g, '') }}</text>
          </view>
          <view class="info-item">
            <text class="item-label">商家详细地址</text>
            <text class="item-value">{{ refund.shipperAddress }}</text>
          </view>
          <view class="info-item clickable logistics-item"  @click="goLogistics">
            <text class="item-label">寄回配送方式</text>
            <view class="item-value with-arrow">
              <text class="logistics-value">{{ refund.logisticsCompany || '未填写' }}</text>
              <up-icon name="arrow-right" size="28rpx" color="#999"></up-icon>
            </view>
          </view>
          <view class="info-item clickable logistics-item" @click="goLogistics">
            <text class="item-label">寄回物流单号</text>
            <view class="item-value with-arrow">
              <text class="logistics-value">{{ refund.logisticsOrderNo || '未填写' }}</text>
              <up-icon name="arrow-right" size="28rpx" color="#999"></up-icon>
            </view>
          </view>
          
          <!-- 物流提示区域 -->
          <view class="logistics-notice" v-if="refund.status === 1 && !refund.logisticsOrderNo">
            <view class="notice-content">
              <view class="notice-icon">
                <uni-icons type="info-filled" size="32rpx" color="#FF9900"></uni-icons>
              </view>
              <view class="notice-text">
                商家已同意您的申请，请寄回商品并填写物流信息
              </view>
            </view>
          </view>
        </template>
      </view>

      <!-- 退款信息 -->
      <view class="card info-card" v-if="[1,2].includes(refund.type) && refund.amount !== null">
        <view class="info-title">
          <view class="title-bar"></view>
          <text>退款信息</text>
        </view>
        <view class="info-item">
          <text class="item-label">退款金额</text>
          <text class="item-value refund-amount">
            <text class="symbol">￥</text>{{ refund.amount }}
          </text>
        </view>
        <view class="info-item" v-if="refund.processTime">
          <text class="item-label">处理时间</text>
          <text class="item-value">{{ refund.processTime }}</text>
        </view>
      </view>

      <!-- 商家反馈 -->
      <view class="card info-card" v-if="refund.feedback">
        <view class="info-title">
          <view class="title-bar"></view>
          <text>商家反馈</text>
        </view>
        <view class="feedback-content">
          {{ refund.feedback }}
        </view>
      </view>
      
      <!-- 底部占位 - 确保内容不被底部操作栏遮挡 -->
      <view class="bottom-placeholder"></view>
    </view>
  </scroll-view>

  <!-- 底部操作区 -->
  <view class="footer-action" v-if="refund && !refund.complete && refund.status !== 2">
    <template v-if="refund.status === 0">
      <button class="action-btn cancel-btn" @click="cancelRefund">取消申请</button>
    </template>
    
    <template v-if="refund.status === 1 && refund.needShipBack === 1 && !refund.logisticsOrderNo">
      <button class="action-btn primary-btn" @click="goLogistics">填写物流信息</button>
    </template>
  </view>

  <!-- 客服弹窗 -->
  <up-popup mode="center" :show="showService" :closable="true" @close="showService = false" round="20">
    <view class="service-popup">
      <view class="popup-title">联系方式</view>
      <view class="service-list">
        <view class="service-item">
          <text class="service-label">微信号码</text>
          <view class="service-value">
            <text>WX123456</text>
            <up-copy content="WX123456">
              <text class="copy-btn">复制</text>
            </up-copy>
          </view>
        </view>
        <view class="service-item">
          <text class="service-label">手机号码</text>
          <view class="service-value">
            <text>18728478236</text>
            <text class="call-btn" @click="makePhoneCall('18728478236')">
              拨打
            </text>
          </view>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script>
import {getRefund, cancelRefund} from "@/api/sell/refund";

export default {
  data() {
    return {
      refundId: '',
      refund: null,
      showService: false,
    }
  },
  onLoad(option) {
    this.refundId = option.refundId
    this.loadRefundData()
  },
  methods: {
    loadRefundData() {
      this.$modal.loading('加载中')
      getRefund(this.refundId).then(res => {
        this.refund = res.data
        if (this.$refs.albumRef && this.refund.sellOrderDetailVo.images) {
          this.$refs.albumRef.getImageList(this.refund.sellOrderDetailVo.images)
        }
        
        // 如果商家已同意且需要寄回但未填写物流信息，提示用户
        if([0,1].includes(this.refund.type) && this.refund.needShipBack === 1 && 
           this.refund.status === 1 && !this.refund.logisticsCompany) {
          this.$modal.closeLoading()
          this.$confirmDialog.confirm("该售后申请已同意，请寄送货物至商家地址并填写货物订单信息").then(() => {
            uni.navigateTo({
              url: `/pages/sellment/order/refundLogistics?refundId=${this.refund.id}`,
            })
          })
        } else {
          this.$modal.closeLoading()
        }
      }).catch(err => {
        this.$modal.closeLoading()
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      })
    },
    getRefundTypeText() {
      const typeMap = {
        0: '换货',
        1: '退货退款',
        2: '仅退款'
      };
      return typeMap[this.refund.type] || '';
    },
    getRefundTypeClass() {
      const classMap = {
        0: 'type-exchange',
        1: 'type-refund-return',
        2: 'type-refund-only'
      };
      return classMap[this.refund.type] || '';
    },
    getStatusText() {
      if (this.refund.complete === 1) {
        return '售后已完成';
      }
      
      const statusMap = {
        0: '等待商家处理',
        1: '商家已同意申请',
        2: '商家已拒绝申请'
      };
      return statusMap[this.refund.status] || '';
    },
    getStatusDesc() {
      if (this.refund.complete === 1) {
        return '您的售后申请已处理完成';
      }
      
      if (this.refund.status === 1 && [0, 1].includes(this.refund.type) && 
          this.refund.needShipBack === 1 && !this.refund.logisticsOrderNo) {
        return '请按照商家地址寄回商品，并填写物流信息';
      }
      
      const descMap = {
        0: '商家将尽快处理您的申请',
        1: '请按照商家指引进行下一步操作',
        2: '如有疑问，请联系客服'
      };
      return descMap[this.refund.status] || '';
    },
    getStatusIcon() {
      if (this.refund.complete === 1) {
        return 'checkmark-circle';
      }
      
      const iconMap = {
        0: 'clock',
        1: 'checkmark',
        2: 'close'
      };
      return iconMap[this.refund.status] || 'clock';
    },
    getStatusClass() {
      if (this.refund.complete === 1) {
        return 'status-completed';
      }
      
      const classMap = {
        0: 'status-pending',
        1: 'status-approved',
        2: 'status-rejected'
      };
      return classMap[this.refund.status] || '';
    },
    getStatusValueText() {
      const statusMap = {
        0: '待处理',
        1: '已同意',
        2: '已拒绝'
      };
      return statusMap[this.refund.status] || '';
    },
    getStatusValueClass() {
      const classMap = {
        0: 'status-pending-text',
        1: 'status-approved-text',
        2: 'status-rejected-text'
      };
      return classMap[this.refund.status] || '';
    },
    getProgressText() {
      return this.refund.complete === 0 ? '售后中' : '已完成';
    },
    getProgressClass() {
      return this.refund.complete === 0 ? 'progress-ongoing' : 'progress-completed';
    },
    goLogistics() {
      uni.navigateTo({
        url: `/pages/sellment/order/refundLogistics?refundId=${this.refund.id}`,
      })
    },
    makePhoneCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    // 新增取消申请方法
    cancelRefund() {
      this.$confirmDialog.confirm('确定要取消该售后申请吗？').then(() => {
        this.$modal.loading('处理中')
        return cancelRefund(this.refund.id)
      }).then(() => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess('申请已取消')
        // 刷新数据
        this.loadRefundData()
      }).catch(err => {
        this.$modal.closeLoading()
        console.error('取消申请失败:', err)
      })
    },
    // 计算进度条宽度
    getProgressWidth() {
      // 根据状态计算进度百分比
      let total = 0;
      let current = 0;
      
      // 计算总步骤数
      if (this.refund.status === 2) {
        // 拒绝只有两步：申请 -> 商家审核
        total = 2;
      } else if ([0, 1].includes(this.refund.type)) {
        // 退货退款/换货流程: 申请 -> 商家审核 -> 退回商品 -> 完成
        total = 4;
      } else {
        // 仅退款流程: 申请 -> 商家审核 -> 完成
        total = 3;
      }
      
      // 计算当前进度
      if (this.refund.complete === 1) {
        // 已完成
        current = total;
      } else if (this.refund.status === 2) {
        // 已拒绝
        current = 2;
      } else if (this.refund.status === 1) {
        if ([0, 1].includes(this.refund.type) && this.refund.needShipBack === 1) {
          // 已同意且需要退回商品
          current = this.refund.logisticsOrderNo ? 3 : 2;
        } else {
          // 已同意但不需要退回商品
          current = 2;
        }
      } else {
        // 待处理
        current = 1;
      }
      
      // 计算百分比
      return `${((current - 1) / (total - 1)) * 100}%`;
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
  height: 100vh;
}

/* 页面滚动容器 */
.page-scroll {
  height: 100vh;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.content {
  padding: 20rpx 20rpx;
}

/* 底部占位 */
.bottom-placeholder {
  height: 100rpx;
}

/* 加载动画 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #fff;
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-bottom: 20rpx;
    
    .loading-bounce {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(232, 77, 28, 0.6);
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      animation: bounce 2s infinite ease-in-out;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(232, 77, 28, 0.6);
        opacity: 0.6;
        animation: bounce 2s infinite ease-in-out;
        animation-delay: -1.0s;
      }
    }
  }
  
  .loading-text {
    color: #999;
    font-size: 28rpx;
  }
}

@keyframes bounce {
  0%, 100% { transform: scale(0); }
  50% { transform: scale(1.0); }
}

/* 页面标题 */
.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .back-btn {
    position: absolute;
    left: 20rpx;
    height: 60rpx;
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

/* 状态卡片 */
.status-card {
  margin-bottom: 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 12rpx;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.02);
  
  .status-icon {
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    
    &.status-pending {
      background: #ff9900;
    }
    
    &.status-approved {
      background: #19be6b;
    }
    
    &.status-rejected {
      background: #999;
    }
    
    &.status-completed {
      background: #2b85e4;
    }
  }
  
  .status-info {
    flex: 1;
    
    .status-title {
      display: block;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .status-desc {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
    }
  }
}

/* 卡片基础样式 */
.card {
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.02);
}

/* 商品卡片 */
.goods-card {
  padding: 24rpx;
  display: flex;
  align-items: center;
  
  .goods-image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 8rpx;
    overflow: hidden;
    margin-right: 24rpx;
  }
  
  .goods-info {
    flex: 1;
    min-height: 150rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .title-wrapper {
      display: flex;
      flex-direction: column;
      margin-bottom: 12rpx;
      
      .title {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        line-height: 1.4;
        margin-bottom: 8rpx;
      }
      
      .price {
        font-size: 32rpx;
        font-weight: 600;
        color: #e84d1c;
        
        .symbol {
          font-size: 24rpx;
        }
      }
    }
    
    .specs-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .attr-box {
        font-size: 24rpx;
        color: #999;
        padding: 6rpx 16rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
      }
      
      .quantity {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

/* 联系客服按钮 */
.service-button-wrapper {
  text-align: center;
  margin-bottom: 20rpx;
  
  .service-button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #666;
    background: #fff;
    border-radius: 40rpx;
    border: 1rpx solid #eee;
    margin: 0;
    padding: 0;
    
    &:after {
      border: none;
    }
    
    &:active {
      opacity: 0.8;
    }
  }
}

/* 信息卡片 */
.info-card {
  padding: 0;
  
  .info-title {
    display: flex;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1rpx solid #f8f8f8;
    
    .title-bar {
      width: 4rpx;
      height: 28rpx;
      background: #e84d1c;
      border-radius: 2rpx;
      margin-right: 16rpx;
    }
    
    text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .info-item {
    display: flex;
    padding: 24rpx;
    border-bottom: 1rpx solid #f8f8f8;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.reason-item, &.images-item {
      align-items: flex-start;
    }
    
    &.clickable {
      transition: all 0.3s;
      
      &:active {
        background: #f9f9f9;
      }
    }
    
    &.logistics-item {
      .item-value {
        color: #333;
        
        .logistics-value {
          color: #999;
        }
      }
    }
    
    .item-label {
      flex-shrink: 0;
      width: 160rpx;
      font-size: 28rpx;
      color: #666;
    }
    
    .item-value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      text-align: right;
      
      &.with-arrow {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8rpx;
      }
      
      &.reason-text {
        text-align: left;
        line-height: 1.6;
        word-break: break-all;
        white-space: normal;
        padding-left: 20rpx;
      }
      
      &.no-image {
        color: #999;
      }
      
      &.status-pending-text {
        color: #ff9900;
      }
      
      &.status-approved-text {
        color: #19be6b;
      }
      
      &.status-rejected-text {
        color: #999;
      }
      
      &.progress-ongoing {
        color: #e84d1c;
      }
      
      &.progress-completed {
        color: #999;
      }
      
      &.ship-back-yes {
        color: #19be6b;
      }
      
      &.ship-back-no {
        color: #e84d1c;
      }
      
      &.refund-amount {
        font-weight: 600;
        color: #e84d1c;
        
        .symbol {
          font-size: 24rpx;
          font-weight: normal;
        }
      }
      
      &.address-value {
        display: flex;
        flex-direction: column;
        gap: 8rpx;
      }
    }
  }
  
  /* 物流填写提示区域 */
  .logistics-notice {
    padding: 24rpx;
    border-top: 1rpx solid #f8f8f8;
    
    .notice-content {
      display: flex;
      align-items: center;
      background: #FFF9F2;
      padding: 20rpx;
      border-radius: 8rpx;
      margin-bottom: 24rpx;
      
      .notice-icon {
        margin-right: 12rpx;
        margin-top: 4rpx;
      }
      
      .notice-text {
        flex: 1;
        font-size: 26rpx;
        color: #FF9900;
        line-height: 1.5;
      }
    }
    
    .notice-btn-area {
      display: flex;
      justify-content: flex-end;
      
      .notice-btn {
        height: 64rpx;
        line-height: 64rpx;
        background: #E1F2FF;
        color: #2B85E4;
        font-size: 26rpx;
        padding: 0 40rpx;
        border-radius: 32rpx;
        margin: 0;
        
        &:after {
          border: none;
        }
        
        &:active {
          opacity: 0.9;
        }
      }
    }
  }
  
  .feedback-content {
    font-size: 26rpx;
    color: #333;
    line-height: 1.6;
    background: #f8f8f8;
    margin: 0 24rpx 24rpx;
    padding: 20rpx;
    border-radius: 8rpx;
  }
}

/* 标签样式 */
.tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  font-size: 24rpx;
  border-radius: 4rpx;
  line-height: 1.4;
  
  &.type-exchange {
    color: #2b85e4;
    background: rgba(43, 133, 228, 0.1);
    border: 1rpx solid rgba(43, 133, 228, 0.2);
  }
  
  &.type-refund-return {
    color: #e84d1c;
    background: rgba(232, 77, 28, 0.1);
    border: 1rpx solid rgba(232, 77, 28, 0.2);
  }
  
  &.type-refund-only {
    color: #19be6b;
    background: rgba(25, 190, 107, 0.1);
    border: 1rpx solid rgba(25, 190, 107, 0.2);
  }
}

/* 客服弹窗 */
.service-popup {
  padding: 40rpx;
  width: 560rpx;
  background: #fff;
  border-radius: 20rpx;
  
  .popup-title {
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
  }
  
  .service-list {
    .service-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .service-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .service-value {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20rpx;
        
        text {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
}

/* 复制和拨打按钮 */
.copy-btn, .call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48rpx;
  min-width: 96rpx;
  font-size: 24rpx;
  border-radius: 24rpx;
  padding: 0 20rpx;
}

.copy-btn {
  color: #e84d1c;
  background: rgba(232, 77, 28, 0.1);
}

.call-btn {
  color: #2b85e4;
  background: rgba(43, 133, 228, 0.1);
}

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 证据图片 */
.evidence-images {
  margin-top: 12rpx;
}

/* 新增售后进度条样式 */
.progress-steps {
  position: relative;
  padding: 40rpx 30rpx 60rpx;
  
  .step-line-container {
    position: absolute;
    top: 50rpx;
    left: 70rpx;
    right: 70rpx;
    height: 2rpx;
    background: transparent;
    z-index: 1;
  }
  
  .step-line-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: #e5e5e5;
  }
  
  .step-line-active {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #e84d1c;
    transition: width 0.5s ease;
  }
  
  .step-items {
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 2;
  }
  
  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    
    .step-dot {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: #e5e5e5;
      margin-bottom: 16rpx;
      border: 4rpx solid #f5f5f5;
    }
    
    .step-text {
      font-size: 24rpx;
      color: #999;
      text-align: center;
      max-width: 140rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    &.active {
      .step-dot {
        background: #e84d1c;
      }
      
      .step-text {
        color: #333;
      }
    }
    
    &.current {
      .step-dot {
        width: 24rpx;
        height: 24rpx;
        background: #e84d1c;
        position: relative;
        
        &:after {
          content: '';
          position: absolute;
          top: -4rpx;
          left: -4rpx;
          right: -4rpx;
          bottom: -4rpx;
          border-radius: 50%;
          border: 2rpx solid #e84d1c;
          animation: pulse 1.5s infinite;
        }
      }
      
      .step-text {
        color: #e84d1c;
        font-weight: 500;
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 底部操作区 */
.footer-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background: #fff;
  display: flex;
  padding: 20rpx 30rpx;
  box-shadow: 0 -1rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .action-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    border-radius: 45rpx;
    margin: 0;
    
    &:after {
      border: none;
    }
    
    &:active {
      opacity: 0.9;
    }
  }
  
  .cancel-btn {
    color: #333;
    background: #f5f5f5;
  }
  
  .primary-btn {
    background: #E84D1C;
    color: #fff;
  }
}
</style>
